<template>
  <div class="userCenter">
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    
    <div class="col-md-3  userCenter-card ">
      <div class="card ">
        <div class="card-item">
          <strong>用户名：</strong> {{userInfo.user}}
          <button class="btn btn-sm btn-default" @click="careUser">
            <span class="glyphicon glyphicon-plus"></span>关注他
          </button>
        </div>
        <div class="card-item">
          <strong>简　介：</strong> {{userInfo.intro}}
        </div>
        <div class="card-item">
          <strong>积　分：</strong> {{userInfo.integral}}
        </div>
        <div class="card-item">
          <strong>博　龄：</strong> {{userInfo.blogAge}} 天
        </div>
        <div class="card-item care-and-fans clearfix">
          <div class="pull-left text-center">
            <div>{{userCare.length}} </div>
            <div>关注</div>
          </div>
          <div class="pull-left text-center">
            <div>{{userFans.length}}</div>
            <div>粉丝</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-9 userCenter-body">
      <ul class="side-nav-article-list">
        <li v-for="item in userArticles">
          <h4 :class="{'link-better-icon': item.better, 'clearfix': true}" >
            <router-link :to="'/article/'+item._id" :class="{'better-icon': item.better}" >{{item.title}} </router-link>
            <!-- <button v-show="!item.better" class="apply-add-better pull-right">申请加精</button> -->
          </h4>
          <p class="article-content">
            摘要: {{item.intro}}
          </p>
          <div class="item-footer clearfix">
            <div class="inner pull-right">
              <span>posted</span>
              <span>@ {{item.time | date}}</span>
              <span>阅读量({{item.read}})</span>
              <span>评论({{item.comment.length}}) </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style>
  .card-item {
    margin-top: 10px;
  }
  .care-and-fans > div {
    padding:0 20px;
    
  }
  .care-and-fans > div:nth-child(1) {
    padding-left: 0;
    border-right: 1px solid #ddd;
  }
</style>

<script>
  export default {
    data () {
      return {
        userArticles: [],
        userInfo: {},
        userFans: [],
        userCare: []
      }
    },
    computed: {
      userId () {
        return this.$route.params.id
      },
      loginerId () {
        return this.$store.state.userInfo && this.$store.state.userInfo._id
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      //  初始化用户数据
      init () {
        //  如果用户id为当前用户id，跳转到个人中心
        if (this.userId === this.loginerId) {
          this.$router.replace('/personal/' + this.userId)
        } else {
          this.$http.get(this.rootPath + '/user?userId=' + this.userId).then((res) => {
            var oRes = res.data
            this.userArticles = oRes.userArticles
            this.userInfo = oRes.userInfo
            this.userFans = oRes.userFans
            this.userCare = oRes.userCare
          })
        }
      },
      careUser () {
        if (!this.loginerId) {
          return window.alert('请先登录')
        }
        this.$http.post(this.rootPath + '/updateUser/care', {handlerId: this.loginerId, targeterId: this.userId}).then((res) => {
          if (res.data === '1') {
            this.userInfo.fans++
            window.alert('关注成功')
          } else if (res.data === '0') {
            window.alert('已经关注过了')
          }
        })
      }
    },
    watch: {
      '$route': function () {
        this.init()
      }
    },
    props: ['rootPath']
  }

</script>